<template>
	<view class="uv-swiper" :style="{
			backgroundColor: bgColor,
			height: $uv.addUnit(height),
			borderRadius: $uv.addUnit(radius)
		}">
		<!-- 		<view class="close">
			<uv-icon v-if="pop"  name="close" color="#f1f1f1" size="28" @tap="closePop()"></uv-icon>
		</view> -->
		<view class="uv-swiper__loading" v-if="loading">
			<uv-loading-icon mode="circle"></uv-loading-icon>
		</view>
		<swiper v-else class="uv-swiper__wrapper" :style="{
				height: $uv.addUnit(height),
				flex: 1
			}" @change="change" :circular="circular" :vertical="vertical" :interval="interval" :duration="duration" :autoplay="autoplay" :current="current"
			:currentItemId="currentItemId" :previousMargin="$uv.addUnit(previousMargin)" :nextMargin="$uv.addUnit(nextMargin)" :acceleration="acceleration"
			:displayMultipleItems="displayMultipleItems" :easingFunction="easingFunction">
			<swiper-item class="uv-swiper__wrapper__item" v-for="(item, index) in list" :key="index">
				<view class="uv-swiper__wrapper__item__wrapper" :style="[itemStyle(index)]">
					<!-- 在nvue中，image图片的宽度默认为屏幕宽度，需要通过flex:1撑开，另外必须设置高度才能显示图片 -->
					<image class="uv-swiper__wrapper__item__wrapper__image" v-if="getItemType(item) == 'image'" :src="getSource(item)" :mode="imgMode"
						@tap="clickHandler(item,index)" :style="{
							height: $uv.addUnit(height),
							borderRadius: $uv.addUnit(radius)
						}" show-menu-by-longpress></image>
					<image class="uv-swiper__wrapper__item__wrapper__video" v-if="getItemType(item) == 'video' && from == 1" :src="item.coverPictureUrl"
						:mode="imgMode" :style="{height: $uv.addUnit(height),borderRadius: $uv.addUnit(radius)}"></image>
					<video class="uv-swiper__wrapper__item__wrapper__video" :initial-time="video_time"
						v-if="getItemType(item) == 'video' && from != 1 &&  videoLoading" :id="`video-${index}`" :enable-progress-gesture="false"
						:src="getSource(item)" :poster="getPoster(item)" :title="showTitle && $uv.test.object(item) && item.title ? item.title : ''" :style="{
							height: $uv.addUnit(height)
						}" :controls="false" :show-center-play-btn="false" @tap="clickHandler(item,index)" @timeupdate="timeUpdate" @play="isVideoPlay" @ended="isVideoEnded"
						@loadedmetadata="loadedmetadata"></video>
					<view class="video-play"
						v-if="(getItemType(item) == 'video' && !isPlay && from != 1) || (getItemType(item) == 'video' && !isPlay_s  && from != 1)">
						<view class="video-play-btn" @tap.stop.prevent="videoPlay()">
							<image class="play" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/play.png">
							</image>
						</view>
						<view class="video-play-overlay" @tap.stop.prevent="videoPlayOverlay()"></view>
						<view class="dy-iconfont icon-a-bianzu69" :style="{top: mp.menuTop + 'px'}" @tap.stop.prevent="videoPlayOverlay()"></view>
					</view>
					<view class="video-play"
						v-if="(getItemType(item) == 'video' && !isPlay && from == 1) || (getItemType(item) == 'video' && !isPlay_s  && from == 1)">
						<view class="video-play-btn" @tap="clickHandler(item,index)">
							<image class="play" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/play.png">
							</image>
						</view>
						<view class="video-play-overlay"></view>
					</view>
					<view class="line-progress-time"> <text v-if="isDrag">{{dragStarTime}} / {{dragEndTime}}</text>
					</view>
					<view class="line-progress" v-if="isVideo && isPlay">
						<uv-slider v-model="currentTime" min="0" :max="duration_v" backgroundColor="#E2E9E4A3" activeColor="#FFFFFF" @changing="sliderChanging"
							@change="sliderChange"></uv-slider>
					</view>
					<text v-if="showTitle && $uv.test.object(item) && item.title" class="uv-swiper__wrapper__item__wrapper__title uv-line-1"
						:style="[$uv.addStyle(titleStyle)]">{{ item.title }}</text>
				</view>
			</swiper-item>
		</swiper>
		<view class="uv-swiper__indicator" :style="[$uv.addStyle(indicatorStyle)]">
			<slot name="indicator">
				<uv-swiper-indicator v-if="!loading && indicator && !showTitle" :indicatorActiveColor="indicatorActiveColor"
					:indicatorInactiveColor="indicatorInactiveColor" :length="list.length" :current="currentIndex"
					:indicatorMode="indicatorMode"></uv-swiper-indicator>
			</slot>
		</view>
	</view>
</template>

<script>
	import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
	import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
	import props from './props.js';
	import mp from "@/mixins/mp.js";
	/**
	 * Swiper 轮播图
	 * @description 该组件一般用于导航轮播，广告展示等场景,可开箱即用，
	 * @tutorial https://www.uvui.cn/components/swiper.html
	 * @property {Array}			list					轮播图数据
	 * @property {Boolean}			indicator				是否显示面板指示器（默认 false ）
	 * @property {String}			indicatorActiveColor	指示器非激活颜色（默认 '#FFFFFF' ）
	 * @property {String}			indicatorInactiveColor	指示器的激活颜色（默认 'rgba(255, 255, 255, 0.35)' ）
	 * @property {String | Object}	indicatorStyle			指示器样式，可通过bottom，left，right进行定位
	 * @property {String}			indicatorMode			指示器模式（默认 'line' ）
	 * @property {Boolean}			autoplay				是否自动切换（默认 true ）
	 * @property {String | Number}	current					当前所在滑块的 index（默认 0 ）
	 * @property {String}			currentItemId			当前所在滑块的 item-id ，不能与 current 被同时指定
	 * @property {String | Number}	interval				滑块自动切换时间间隔（ms）（默认 3000 ）
	 * @property {String | Number}	duration				滑块切换过程所需时间（ms）（默认 300 ）
	 * @property {Boolean}			circular				播放到末尾后是否重新回到开头（默认 false ）
	 * @property {String | Number}	previousMargin			前边距，可用于露出前一项的一小部分，nvue和支付宝不支持（默认 0 ）
	 * @property {String | Number}	nextMargin				后边距，可用于露出后一项的一小部分，nvue和支付宝不支持（默认 0 ）
	 * @property {Boolean}			acceleration			当开启时，会根据滑动速度，连续滑动多屏，支付宝不支持（默认 false ）
	 * @property {Number}			displayMultipleItems	同时显示的滑块数量，nvue、支付宝小程序不支持（默认 1 ）
	 * @property {String}			easingFunction			指定swiper切换缓动动画类型， 只对微信小程序有效（默认 'default' ）
	 * @property {String}			keyName					list数组中指定对象的目标属性名（默认 'url' ）
	 * @property {String}			imgMode					图片的裁剪模式（默认 'aspectFill' ）
	 * @property {String | Number}	height					组件高度（默认 130 ）
	 * @property {String}			bgColor					背景颜色（默认 	'#f3f4f6' ）
	 * @property {String | Number}	radius					组件圆角，数值或带单位的字符串（默认 4 ）
	 * @property {Boolean}			loading					是否加载中（默认 false ）
	 * @property {Boolean}			showTitle				是否显示标题，要求数组对象中有title属性（默认 false ）
	 * @event {Function(index)}	click	点击轮播图时触发	index：点击了第几张图片，从0开始
	 * @event {Function(index)}	change	轮播图切换时触发(自动或者手动切换)	index：切换到了第几张图片，从0开始
	 * @example	<uv-swiper :list="list4" keyName="url" :autoplay="false"></uv-swiper>
	 */
	export default {
		name: 'uv-swiper',
		mixins: [mpMixin, mixin, props, mp],
		emits: ['click', 'change'],
		components: {},
		data() {
			return {
				currentIndex: 0,
				//video对象
				videoplay: {},
				isPlay: false,
				isVideo: false,
				sliderValue: 0,
				videoLoading: false,
				isPlay_s: false,
				video_time: 0,
				video_s: 0,
				// 当前时长
				currentTime: null,
				// 总时间
				duration_v: 0.1,
				// 是否正在拖拽进度
				isDrag: false,
				// 拖拽时视频时间
				dragStarTime: '',
				dragEndTime: '',
			}
		},
		// if (item.item.fileType == 2) {
		// 	this.$refs.swiperPop.videoPlay();
		// }
		watch: {
			current(val, preVal) {
				if (val == preVal) return;
				this.currentIndex = val; // 和上游数据关联上
			},
		},
		computed: {
			itemStyle() {
				return index => {
					const style = {}
					// #ifndef APP-NVUE || MP-TOUTIAO
					// 左右流出空间的写法不支持nvue和头条
					// 只有配置了此二值，才加上对应的圆角，以及缩放
					if (this.nextMargin && this.previousMargin) {
						style.borderRadius = this.$uv.addUnit(this.radius)
						if (index !== this.currentIndex) style.transform = 'scale(0.92)'
					}
					// #endif
					return style
				}
			}
		},
		created() {
			if (this.list[this.current]?.fileType == 2 || this.list[this.current]?.type == 'video' || this.list[this.current]?.type == 'VIDEO') {
				this.videoplay = uni.createVideoContext('video-' + this.current, this);
				this.isVideo = true
				setTimeout(() => {
					this.videoLoading = true
				}, 200)
			}
		},
		methods: {
			//手动触发视频播放
			// videoPlay() {
			// 	console.log(1);
			// 	setTimeout(() => {
			// 		this.videoplay.play();
			// 	}, 200);
			// },
			// 播放
			play() {
				this.videoplay.play()
			},
			// 暂停
			pause() {
				this.videoplay.pause()
			},

			// 播放状态切换
			videoPlay() {
				this.isPlay_s = !this.isPlay_s
				console.log(this.isPlay_s);
				if (this.isPlay_s) {
					this.play()
				} else {
					this.pause()
				}
			},

			getItemType(item) {
				if (typeof item == 'string') return this.$uv.test.video(this.getSource(item)) ? 'video' : 'image'
				if (typeof item == 'object' && this.keyName) {
					if (!item.type) return this.$uv.test.video(this.getSource(item)) ? 'video' : 'image'
					if (item.type == 'image') return 'image'
					if (item.type == 'video') return 'video'
					if (item.type == 'VIDEO') return 'video'
					return 'image'
				}
			},
			// 获取目标路径，可能数组中为字符串，对象的形式，额外可指定对象的目标属性名keyName
			getSource(item) {
				if (typeof item == 'string') return item
				if (typeof item == 'object' && this.keyName) return item[this.keyName]
				else this.$uv.error('请按格式传递列表参数')
				return ''
			},
			// 轮播切换事件
			change(e) {
				// 当前的激活索引
				const {
					current
				} = e.detail
				this.pauseVideo(this.currentIndex)
				this.currentIndex = current
				this.isVideo = this.list[current].fileType == 2 || this.list[current].type == 'video' || this.list[current]
					.type == 'VIDEO'
				console.log(this.isVideo);
				if (this.isVideo) {
					let videoId = 'video-' + current
					this.videoplay = uni.createVideoContext(videoId, this);
					setTimeout(() => {
						this.videoLoading = true
					}, 200)
				}
				this.$emit('change', e.detail)
			},
			// 切换轮播时，暂停视频播放
			pauseVideo(index) {
				const lastItem = this.getSource(this.list[index])
				if (this.$uv.test.video(lastItem)) {
					// 当视频隐藏时，暂停播放
					const video = uni.createVideoContext(`video-${index}`, this)
					this.isPlay = false
					video.pause()
				}
			},
			// 当一个轮播item为视频时，获取它的视频海报
			getPoster(item) {
				return typeof item == 'object' && item.poster ? item.poster : ''
			},
			videoPlayOverlay() {
				this.$emit('videoPlayOverlay')
			},
			swpVideoPlay(item, index) {

			},
			// 点击某个item
			clickHandler(item, index) {
				// if (this.getItemType(item) == 'video' && !this.isPlay_s) {
				// 	this.$emit('click', {
				// 		item: item,
				// 		index: index
				// 	})
				// 	return
				// }
				if (this.getItemType(item) == 'video') {
					this.videoPlay()
				}
				this.$emit('click', {
					item: item,
					index: index
				})
			},
			closePop() {
				this.$emit('closePop')
			},

			isVideoPlay() {
				this.isPlay = true
			},
			isVideoEnded() {
				this.isPlay = false
			},
			videoTimeupdate(event) {
				let maxTime = 100 / event.detail.duration
				this.sliderValue = event.detail.currentTime * maxTime
				this.$emit('videoPlayupdate', event.detail)
			},
			changingVideo(e) {
				console.log(this.video_time);
				// console.log(this.sliderValue);
			},
			// 播放进度发生变化
			timeUpdate(e) {
				// 拖拽时不需要进行更新
				if (!this.isDrag) {
					// 更新进度
					const {
						currentTime
					} = e.detail
					this.currentTime = currentTime
					// 播放完成
					if (Math.trunc(currentTime) === Math.trunc(this.duration)) {
						this.$emit('playcomplete', e)
					}
					// 返回当前播放时间
					this.$emit('timeupdate', e)
				}
			},
			// 拖拽结束
			sliderChange(value) {
				// 停止拖拽
				this.isDrag = false
				// 判断一下是否大于基础时间
				if (this.duration_v > 0.1) {
					// 跳到指定时间点
					this.videoplay.seek(value)
					// 并调用播放
					this.play()
				}
			},
			// 正在拖拽
			sliderChanging(value) {
				// 开始拖拽
				this.isDrag = true
				// 刷新时间
				this.reloadVideoTime()
			},
			// 刷新显示时间
			reloadVideoTime() {
				// 当前时间
				this.dragStarTime = this.currentTime.toFixed(2)
				// // 总时间
				this.dragEndTime = this.duration_v.toFixed(2)
			},
			// 加载完成
			loadedmetadata(e) {
				const {
					duration
				} = e.detail
				// 记录视频总时间
				this.duration_v = duration
				// 回调
				this.$emit('loadcomplete')
			},
		},
	}
</script>

<style lang="scss" scoped>
	$show-lines: 1;
	@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
	@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';

	.uv-swiper {
		@include flex;
		justify-content: center;
		align-items: center;
		position: relative;
		overflow: hidden;

		.close {
			position: absolute;
			top: 60rpx;
			right: 40rpx;
			z-index: 999;
		}

		&__wrapper {
			flex: 1;

			&__item {
				flex: 1;


				.video-play {
					width: 100%;
					height: 100%;
					position: absolute;
					justify-content: center;
					align-items: center;
					z-index: 8;

					.icon-a-bianzu69 {
						position: absolute;
						left: 50rpx;
						z-index: 10;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-shrink: 0;
						width: 36rpx;
						height: 36rpx;
						color: #000;
						font-size: 36rpx;
						background: rgba(255, 255, 255, 0.6);
						border-radius: 50%;
						padding: 10rpx;
					}

					.video-play-overlay {
						width: 100%;
						height: 100%;
						background: rgba(0, 0, 0, 0.2);
					}

					.video-play-btn {
						position: absolute;
						width: 150rpx;
						height: 150rpx;
						background: rgba(0, 0, 0, 0.1);
						border: 2rpx solid #FFFFFF;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;

						.play {
							width: 66rpx;
							height: 66rpx;
						}
					}
				}

				.line-progress-time {
					text-align: center;
					box-sizing: border-box;
					padding: 0 16rpx;
					width: 100%;
					position: absolute;
					bottom: 100rpx;
					font-size: 24rpx;
					font-weight: 900;
					color: #FFFFFF;
					line-height: 30rpx;
				}

				.line-progress {
					box-sizing: border-box;
					padding: 0 16rpx;
					width: 100%;
					position: absolute;
					bottom: 30rpx;
				}

				&__wrapper {
					@include flex;
					position: relative;
					overflow: hidden;
					transition: transform 0.3s;
					flex: 1;
					align-items: center;

					&__image {
						flex: 1;
					}

					&__video {
						flex: 1;
					}

					&__title {
						position: absolute;
						background-color: rgba(0, 0, 0, 0.3);
						bottom: 0;
						left: 0;
						right: 0;
						font-size: 30rpx;
						height: 60rpx;
						line-height: 60rpx;
						color: #FFFFFF;
						flex: 1;
					}
				}
			}
		}

		&__indicator {
			position: absolute;
			bottom: 10px;
		}
	}
</style>